<template>
  <div class="layout-fixed">
    <!-- fixed定位的头部 -->
    <header></header>

    <!-- 可以滚动的区域 -->
    <main>
      <!-- 内容在这里... -->
    </main>

    <!-- fixed定位的底部 -->
    <footer :class="{ static: isShow }">
      <input type="text" placeholder="Footer..." />
      <button class="submit">提交</button>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      isShow: false,
      docHeight:
        document.documentElement.clientHeight || document.body.clientHeight,
      showHeight: document.documentElement.clientHeight,
      isHide: true
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize, false);
  },
  methods: {
    // https://segmentfault.com/a/1190000021622684?utm_source=tag-newest
    // https://www.cnblogs.com/wuxianqiang/p/10538757.html
    handleResize() {
      // 通过判断页面的高度我可以可以处理一下问题
      // 1. 当键盘收起的时候让表单失去焦点（注：iOS键盘收起表单会自动失去焦点，但是安卓键盘收起并不会让表单失去焦点）
      // 2. 当键盘展开时让页面滚动，防止内容被遮挡起来导致页面无法操作
      const resizeHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      if (resizeHeight < this.docHeight) {
        console.log('键盘弹起');
      } else {
        // this.$refs.input.blur();
        console.log('键盘关闭');
      }
      // 2.1 需要让input滚动到可视区域，方便用户正常输入，可以使用下面代码解决
      if (
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        window.setTimeout(function() {
          if ('scrollIntoView' in document.activeElement) {
            document.activeElement.scrollIntoView();
          } else {
            document.activeElement.scrollIntoViewIfNeeded();
          }
        }, 0);
      }
    },
    handleResize2() {
      const u = navigator.userAgent;
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
      console.log('====handleResize', u, isAndroid);
      if (!isAndroid) return;
      const newHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      console.log('====sss', newHeight, this.docHeight);
      if (newHeight < this.docHeight) {
        const activeElement = document.activeElement;
        console.log('====sss', activeElement);
        if (
          activeElement &&
          (activeElement.tagName === 'INPUT' ||
            activeElement.tagName === 'TEXTAREA')
        ) {
          setTimeout(() => {
            document.activeElement.scrollIntoView(false);
          }, 0);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
header {
  position: fixed;
  height: 50px;
  left: 0;
  right: 0;
  top: 0;
}
footer {
  position: fixed;
  height: 34px;
  left: 0;
  right: 0;
  bottom: 0;
  &.static {
    position: static;
  }
}
main {
  /* main绝对定位，进行内部滚动 */
  position: absolute;
  top: 50px;
  bottom: 34px;
  /* 使之可以滚动 */
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 增加该属性，可以增加弹性 */
  .content {
    height: 2000px;
  }
}
</style>
